<template>
    <div>
      <div class="banner">
        <img src="./banner.jpg" width="100%" alt="Shop Meet50off">
      </div>
      <div class="bg-wrap">
        <div class="discount-panel">
          <div class="t-header">
            Black Friday Exclusive Offer
          </div>
          <div class="t-middle flex">
            <div class="item">100%</div>
            <div class="item">75%</div>
            <div class="item">50%</div>
          </div>
          <div class="t-bottom">
            Super value cash back discount, to be a shopping expert who can manage money
          </div>
        </div>
        <div class="top-seller">
          <img src="./t-top-sellers.png" alt="Shop Meet50off">
        </div>
        <div class="content1 flex">
          <plate-card head="Clothing" :skus="[ 'B07JLK7W2W','B07D6QQWLR','B07K476S2B','B0727V8ZC4','B07K2L8BMC','B06VS9WMZZ']"></plate-card>
          <plate-card head="Electronics" :skus="[ 'B07JF9F9LW','B07D2DG4HD','B075NB5DKZ','B07HMZ9M4G','B07JH9RNQ8','B07GWWQJT9']"></plate-card>
          <div class="division"><div class="division-bg"></div></div>
          <div class="division"><div class="division-bg"></div></div>

          <plate-card head="Home & Garden" :skus="[ 'B0786YSTG3','B074N4TCX5','B078W6SZM1','B07HP2M8XC','B07HNZBVCX','B07DFHTFNV']"></plate-card>
          <plate-card head="Beauty & Health" :skus="[ 'B07DKVWM3T','B07H7JND8J','B079HTBV48','B07J5JQ344','B07JLXCXHH','B07H55V3D8']"></plate-card>

          <div class="division"><div class="division-bg"></div></div>
          <div class="division"><div class="division-bg"></div></div>

          <plate-card head="Toys & Pet" :skus="[ 'B0118NHUTG','B076KLZ8M7','B07FQBZF8F','B075P1NTKN','B07H5FCWZB','B07H569T8M']"></plate-card>
          <plate-card head="Other" :skus="[ 'B07JDYNCFB','B074N4TCX5','B0786YSTG3','B07JCK31NN','B07B62SDCB','B07HNJ4XJD']"></plate-card>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import PlateCard from './plate-card'

  /**
   * 分类信息
   *    正式环境  7 clothing 9 electronics 12 toys  13 pet  10 home&garden  8 beauty&health
   *    测试环境  7 clothing 9 electronics 12 toys  13 pet  10 home&garden  8 beauty&health
   */
  export default {
    name: "activity",
    data() {
      return {

      }
    },
    components: {
      PlateCard
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .banner {
    img{
      vertical-align: top
    }
  }
  .colorF{
    color: #fff
  }
  .flex{
    display: flex
  }
  .content1{
    max-width: 1080px
    margin: 0 auto
    flex-wrap: wrap
  }
  .bg-wrap{
    background: url('./bg.jpg')
    background-size: cover
    padding-top: 30px;
    padding-bottom: 165px
  }
  .discount-panel{
    margin: 0 auto
    width: 819px;
    height: 375px;
    background-color: #313131;
    border: 2px solid #22ac38;
  }
  .t-header{
    text-align: center
    font-family: SimSun;
    font-size: 41px;
    font-weight: normal;
    font-stretch: normal;
    padding: 27px 0
    color: #f7fefb;
  }
  .t-middle{
    width: 86%
    margin: 0 auto
    justify-content: space-between
    .item{
      width: 214px;
      height: 158px;
      background-color: #010103;
      border: 1px solid #22ac38;
      text-align: center;
      line-height: 158px;
      font-family: SimSun;
      font-size: 58px;
      font-weight: normal;
      font-stretch: normal;
      color: #f70e3a;
    }
  }
  .t-bottom{
    text-align: left;
    font-family: SimSun;
    font-size: 36px;
    font-weight: normal;
    font-stretch: normal;
    padding: 27px 56px 5px;
    color: #f7fefb;
  }
  .top-seller{
    margin: 50px auto
    text-align: center
  }
  .division{
    width: 518px;
    background: #000;
  }
  .division-bg{
    width: 493px;
    margin: 10px auto
    height: 113px;
    background-image: url('./division.jpg')
    background-size: cover
  }
</style>
